/**
 * This file can be included in your page to help you debug which `ais-*`
 * classes are added to the widgets.
 * It will outline every added node and display the class name on hover
 **/
[class^=ais-] {
  outline: 1px solid red !important;
  position: relative;
}
[class^=ais-]:hover:after {
  background: red;
  color: black;
  content: attr(class);
  font-size: 1rem;
  height: 20px;
  left: 0;
  padding: .5rem;
  position: absolute;
  top: 0;
  white-space: nowrap;
  z-index: 10;
  font-weight: normal;
}
[class^=ais-] [class^=ais-] {
  outline: 1px solid orange !important;
  position: relative;
}
[class^=ais-] [class^=ais-]:hover:after {
  background: orange;
  top: 20px;
  z-index: 100;
}
[class^=ais-] [class^=ais-] [class^=ais-] {
  outline: 1px solid yellow !important;
  position: relative;
}
[class^=ais-] [class^=ais-] [class^=ais-]:hover:after {
  background: yellow;
  top: 40px;
  z-index: 1000;
}
[class^=ais-] [class^=ais-] [class^=ais-] [class^=ais-] {
  outline: 1px solid cyan !important;
  position: relative;
}
[class^=ais-] [class^=ais-] [class^=ais-] [class^=ais-]:hover:after {
  background: cyan;
  top: 40px;
  z-index: 1100;
}
